<template>
    <!-- Main content -->
    <div>
        <div class="row">
            <div class="col-xs-12">
                <theme-box title="商云钱包列表">
                    <form class="form-inline" @submit.prevent v-el:form>

                    </form>
                    <table class="table table-bordered table-striped" style="width:100%" v-el:table>
                    </table>
                </theme-box>
            </div>
            <!-- /.col -->
        </div>
    </div>
    <!-- /.content -->
</template>

<style lang="less" scoped>
    .form-inline .btn + .btn {
        margin-right: 10px;
    }

    .form-inline .form-group + .form-group {
        margin-left: 20px;
    }
</style>
<script>
    import {
        dateTime,
        createDataTable
    } from 'ui/collections/general.js'
    var serialize = require('form-serialize');
    import {dateFormat} from "lib/method.js"
    import summernote from "pages/partial/summernote.vue";
    var serialize = require('form-serialize');

    var dataTable;
    var columnsSet;
    export default {
        data: () => ({
            mchtList: [],
            item: {},
            columnsSet: []
        }),
        methods: {
            resetBindDrag() {
                this.$refs.modal._resetBindDrag();
            },
            //查询按钮
            search: function () {
                dataTable.ajax.reload();
            },
            //重置按钮
            reset: function () {
                $(".form-inline")[0].reset();
                dataTable.ajax.reload();
            },
            getMcht() {
                let self = this;
                var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                self.$post({
                    url: '/api/v2' + projectName_Url + '/list/mcht/' + mchtId,
                    method: "GET"
                }).then(response => {
                    let list = response.content.info;
                    if(list.length == 1){
                        list.unshift({key:"商户",value:""});
                        self.$set("mchtList", list);
                    }else{
                        list.unshift({key:"所有商户",value:""});
                        self.$set("mchtList", list);
                        self.mchtIdValue = list[0].value
                    }
                },  error => {});
            },
        },
        created() {
            //datatable所用数组
            columnsSet = [{
                title: "钱包可使用金额",
                data: "useAmt",
                className: "operate"
            }, {
                title: "冻结金额",
                data: "frozenAmt",
                className: "operate"
            }, {
                title: "总金额",
                data: "totalAmt",
                className: "operate"
            }, {
                title: "更新日期",
                data: "updDate",
                className: "operate",
                render:function(data){
                   return dateFormat(data)
                }
            },
//                {
//                title: "相关操作",
//                className: "operate",
//                render: function (value, type, row) {
//                    return `
//                    <button type="button" class="btn btn-defalt btn-sm detail">详情</button>
//                `
//                }
//            }
            ]
        },

        ready: async function () {
            dateTime({
                format: "yyyy-mm-dd",
                minView: "2"
            })
            this.$set("columnsSet", columnsSet)
            var self = this;
            self.getMcht();

            //创建dataTable
            dataTable = $(this.$els.table).DataTable({
                "columns": this.columnsSet, //定义列
                "ajax": async function (data, callback, settings) {
                    var page = [{
                        "name": "iDisplayStart",
                        "value": 1 + data.start / data.length
                    }, {
                        "name": "iDisplayLength",
                        "value": data.length
                    }];
                    //表单序列化数据
                    var _data = serialize(self.$els.form, {
                        hash: true,
                        disabled: true,
                        empty: true
                    });
                    _data.aoData = JSON.stringify(page);
                    //发送请求
                    var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
                    var result = await self.$post({
                        url: "/api/v1" + projectName_Url + "/plat/wallet/queryMchtCloud",
                        data: _data,
                        method: "POST"
                    })
                    if (result.respCode != "00") {
                        Midway.alert({
                            title: "操作失败",
                            content: result.content
                        })
                    }
                    callback({
                        recordsTotal: result.content.total,
                        recordsFiltered: result.content.total,
                        data: result.content.couponList || []
                    })
                }
            });
        }
    }
</script>
